<template>
  <div class="tab">
    <tab-nav :navData="navData" />
    <tab-content :contentData="contentData" />
  </div>
</template>

<script>
import TabNav from "./Nav";
import TabContent from "./Content";

import navData from "@/data/nav";
import contentData from "@/data/content";

export default {
  name: "Tab",
  components: {
    TabNav,
    TabContent,
  },
  data() {
    return {
      navData,
      contentData,
    };
  },
};
</script>

<style>
.tab {
  width: 500px;
  height: 400px;
  border: 1px solid #333;
  margin: 100px auto;
}
</style>
